<script setup lang="ts">
import { SearchForm } from './components'
import { defaultPagingParams } from './index'
import type { TableColumn } from '@/types'
import { dataManagementApi } from '@/api'
import { ENERGY } from '@/constant'
// ------------------use------------------
// #region
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<any>[] = [
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '能源类型',
    render({ row }) {
      return ENERGY.fetchEnergyUnit(row.type, 'label')
    },
  },
  {
    key: uuid(),
    label: '时间',
    prop: 'dataTime',
  },
  {
    key: uuid(),
    label: '能源消耗',
    prop: 'val',
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const pagingParams = ref({
  ...defaultPagingParams,
})
// #endregion
// ------------------reactive------
// #region
// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  const { data: res } = await withLoading(
    dataManagementApi.loadEnergyCycleList,
  )(pagingParams.value)
  setTableData(res)
}
// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction flex align-end container"
  >
    <view-table
      :loading="loading"
      :columns="columns"
      :data="tableData"
    >
      <template #actions>
        <SearchForm
          v-model="pagingParams"
          @search="getTableData"
          @reset="getTableData"
        />
      </template>
    </view-table>
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
